﻿<extend name="Public:base" />
<block name="title"><title>个人作品</title></block>
<block name="header_styles">
    <style type="text/css">     
        .jcarousel-wrapper .jcarousel-caption {
            bottom: -150px;
            color: #000;
            -moz-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

        .jcarousel-wrapper:hover .jcarousel-caption {
            color: #ffffff;
            bottom: 0px;
        }

        .jcarousel-wrapper:hover a.jcarousel-control-prev,
        .jcarousel-wrapper:hover a.jcarousel-control-next {
            display: block;
        }

        a.jcarousel-control-prev {
            left: 0px !important;
            color: #ffffff;
            height: 60px;
            background-color: rgba(0,0,0,0.2);
            display: none;
        }

        a.jcarousel-control-next {
            right: 0px !important;
            color: #ffffff;
            height: 60px;
            background-color: rgba(0,0,0,0.2);
            display: none;
        }

            a.jcarousel-control-prev:hover,
            a.jcarousel-control-next:hover {
                color: #ffffff;
            }
    </style>
</block>
<block name="main">
    <div class="row">
        <div class="col-xs-3">
            <div class="column-sidebar">
                <include file="Person:sidebar" />
            </div>
        </div>
        <div class="col-xs-9">
            <div class="column-main">
                <div class="section">
                    <div class="section-title">
                        个人介绍
                    </div>
                    <div class="section-content">
                        <p style="line-height: 25px;padding: 10px 0px;">
                            <if condition="$theirinfo.about heq 0">{$theirinfo.about|textFilter=###,1}<elseif condition="$theirinfo.about eq ''"/>未填写<else />{$theirinfo.about|nl2br}</if>
                        </p>
                    </div>
                </div>
                <div class="section">
                    <div class="section-title" style="padding: 0px;">
                        <ul class="nav nav-tabs" style="margin-bottom: -1px;">
                            <li><a href="{$userid|genTalentURL}">个人信息</a></li>
                            <li class="active"><a href="#">作品展示</a></li>
                        </ul>
                    </div>
                    <div class="section-content">
                        <br />
                        <div class="album-list">
                            <if condition="$f_works heq 0">
                                <div class="alert alert-warning">用户设置为隐藏</div>
                            <elseif condition="empty($worksetlist)"/>
                                <div class="alert alert-warning">该用户很懒，未上传作品</div>
                            <else />
                                <volist name="worksetlist" id="workset">
                                    <div class="album-item">
                                        <h2 class="album-title">{$workset.name}</h2>
                                        <span class="album-desc">{$workset.intro|toWorkDesc}</span>
                                        <div class="jcarousel-wrapper">
                                            <div class="jcarousel" style="width: 703px;margin: auto;">
                                                <ul>
                                                    <volist name="workset['worklist']" id="work">
                                                        <li style="width:703px;">
                                                            <img src="__APP__/{$work.pic_url}" alt="{$work.title}">
                                                            <span class="jcarousel-caption">{$work.description|toWorkDesc}</span>
                                                        </li>
                                                    </volist>
                                                </ul>
                                            </div>
                                            <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                                            <a href="#" class="jcarousel-control-next">&rsaquo;</a>
                                            <p class="jcarousel-pagination"></p>
                                        </div>
                                    </div>
                                </volist>
                            </if>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer_scripts">
    <script type="text/javascript">
        require(["jquery", "jquery.jcarousel"], function($){
            $('.jcarousel').jcarousel();
                $(".jcarousel-wrapper").mouseenter(function () {
                    $(this).find(".jcarousel-caption").addClass("display");
                });
                $(".jcarousel-wrapper").mouseleave(function () {
                    $(this).find(".jcarousel-caption").removeClass("display");
                });

                $('.jcarousel-control-prev')
                    .on('jcarouselcontrol:active', function () {
                        $(this).removeClass('inactive');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        $(this).addClass('inactive');
                    })
                    .jcarouselControl({
                        target: '-=1'
                    });

                $('.jcarousel-control-next')
                    .on('jcarouselcontrol:active', function () {
                        $(this).removeClass('inactive');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        $(this).addClass('inactive');
                    })
                    .jcarouselControl({
                        target: '+=1'
                    });

                $('.jcarousel-pagination')
                    .on('jcarouselpagination:active', 'a', function () {
                        $(this).addClass('active');
                    })
                    .on('jcarouselpagination:inactive', 'a', function () {
                        $(this).removeClass('active');
                    })
                    .jcarouselPagination();
        });
    </script>
</block>
